<template>
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <thead>
    <tr>
      <th>账号</th>
      <th>密码</th>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>手机号</th>
      <th>资金</th>
      <th>商家</th>
      <th>操作</th>
<!--      <th></th>-->
    </tr>
    </thead>

    <tbody>
    <tr v-for="i in list">
      <td>{{i.username}}</td>
      <td>{{i.password}}</td>
      <td>{{i.name}}</td>

      <td v-if="i.sex === 1">男</td>
      <td v-else-if="i.sex === 2">女</td>
      <td v-else>未填写</td>

      <td>{{new Date().getFullYear() - new Date(i.birthday).getFullYear()}}</td>
      <td>{{i.tel}}</td>
      <td>${{i.money}}</td>

      <td v-if="i.business === 1">商家</td>
      <td v-else-if="i.business === 2">非商家</td>
      <td v-else></td>

      <td><span class="alter" @click="alterClick(i)">修改</span><span class="delete" @click="deleteClick(i.username)">删除</span></td>
    </tr>
    </tbody>
  </table>
</template>

<script>

  export default {
    inject: ['reload'],
    name: "Table",
    props: {
      list: {
        type: Array,
        default() {
          return []
        }
      }
    },
    beforeDestroy() { // 该组件销毁之前

    },
    methods: {
      alterClick(user) { // 点击修改按钮
        // console.log(user);
        this.$router.push({name: 'AdminToUserAlter', params: {formData: user}})
      },
      deleteClick(username) { // 点击删除按钮
        if(confirm('确认删除用户' + username + '吗')) {    //增加确认框
          this.$emit('delete', {
            uname: username,
          })
        }
      },
    }
  }
</script>

<style scoped>
  table thead tr {
    height: 50px;

    /*background-color: red;*/
  }
  table thead tr th { /*设置表头下划线*/
    border-bottom: 2px solid #cdcdcd;

    /*background-color: red;*/
  }
  table tbody tr {
    text-align: center;
    height: 50px;
    background-color: #fff;
  }
  table tbody tr td {
    border-bottom: 1px dashed #cdcdcd;

    /*background-color: red;*/
  }
  table tbody tr td span {
    margin-left: 5px;
    margin-right: 5px;
    padding: 5px 10px;

    color: white;
    border-radius: 6px;
    /*background-color: red;*/
  }
  table tbody tr td span:hover {
    opacity: 0.75;
    cursor: pointer;
  }
  table tbody tr td .delete {
    background-color: red;
  }
  table tbody tr td .alter {
    background-color: green;
  }
</style>